<template>
  <div class="app-container">
    <el-row class="filter-container" type="flex" justify="space-between">
      <el-col>
        <el-input v-model="listQuery.keyword" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-select v-model="listQuery.category_id" placeholder="Type" clearable class="filter-item" style="width: 130px">
          <el-option v-for="item in typeOptions" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </el-col>
      <el-col class="text-right">
        <router-link v-if="can('article.create')" to="/article/create/">
          <el-button type="primary" icon="el-icon-edit">新增</el-button>
        </router-link>
      </el-col>
    </el-row>
    <el-tabs v-model="tabIndex" @tab-click="handleFilter">
      <el-tab-pane label="全部" name="0" />
      <el-tab-pane label="已审核" name="1" />
      <el-tab-pane label="待审核" name="2" />
    </el-tabs>
    <grid v-bind.sync="gridData" :loading="listLoading" :total="total" :selection="can('article.delete')" @deleteSelection="deleteSelection" @getList="handleFilter">
      <template #title="{row}">
        {{ row.title }}
      </template>
      <template #grid-action="scope">
        <p>ss</p>
      </template>
      <template #grid-action="{row}">
        <router-link v-if="can('article.edit')" :to="'/article/edit/'+row.id">
          <el-button type="primary" size="mini">
            编辑
          </el-button>
        </router-link>
        <el-button v-if="can('article.delete')" type="danger" plain size="mini" @click="handleDelete(row)">删除</el-button>
      </template>
      <template #delete-selection="scope">
        <el-button v-if="can('article.delete')" class="el-button el-button--danger" @click="onPreviewItem(scope.rows)">删除选中项</el-button>
      </template>
    </grid>
  </div>
</template>

<script>
import { fetchList, getCategory, deleteArticle } from '@/api/article'
import waves from '@/directive/waves'

export default {
  name: 'ArticleIndex',
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = ['info', 'success', 'danger']
      return statusMap[status]
    },
    typeFilter(type) {
      // return calendarTypeKeyValue[type]
    }
  },
  props: {},
  data() {
    return {
      total: 0,
      listLoading: true,
      listQuery: {
        category_id: '',
        status: '',
        keyword: '',
        page: 0,
        limit: 20
      },
      tabIndex: '0',
      gridData: {
        columns: {
          id: { name: 'ID', width: '100px' },
          title: { name: 'Title', align: 'left' },
          created_at: { name: 'Date', width: '150px' },
          type: { name: 'Type', width: '150px' }
        },
        items: [],
        actionWidth: 300,
        searchHeight: 0,
        keyword: null,
        paginator: {
          page: 1,
          limit: 20,
          sort: '+id'
        }
      },
      typeOptions: []
    }
  },
  computed: {
    // 计算表格高度
    tableHeight() {
      return (this.$store.getters.tableHeight - 75) + 'px'
    }
  },
  watch: {
    tabIndex(val, oldVal) {
      this.gridData.items = []
      this.listQuery.status = val === '0' ? '' : val
    }
  },
  created() {
    this.getCategory()
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      this.listLoading = true
      const { data } = await fetchList(this.listQuery)
      this.gridData.items = data.data
      this.total = data.total
      this.listLoading = false
    },
    async getCategory() {
      const { data } = await getCategory()
      const calendarTypeKeyValue = data.data.map((acc, cur) => {
        acc[cur.id] = cur.title
        return acc
      }, {})
      this.typeOptions = calendarTypeKeyValue
    },
    handleFilter() {
      this.gridData.items = []
      this.getList()
    },
    handleDelete(row) {
      deleteArticle(row.id).then(response => {
        this.$notify({
          title: '操作成功',
          message: '成功删除',
          type: 'success',
          duration: 2000
        })
        const index = this.gridData.items.indexOf(row)
        this.gridData.items.splice(index, 1)
      })
    },
    // 批量删除
    deleteSelection(rows) {
      const ids = rows.map((row, index) => {
        return row.id
      })
      deleteArticle(ids).then(response => {
        this.$notify({
          title: '操作成功',
          message: '成功删除',
          type: 'success',
          duration: 2000
        })
        // const index = this.gridData.items.indexOf(row)
        // this.gridData.items.splice(index, 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .pagination-container {
    padding: 32px 16px 0;
  }
</style>
